<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">id="box"</div>
    <div class="box">class="box"</div>
    <h1>这是一个h1</h1>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <input type="text" placeholder="普通文本输入框">
    <input type="password" placeholder="密码输入框">

    <script>
        // 如果传入的是id选择器, 必须添加#前缀
        var box = document.querySelector('#box')
        console.log(box);
        box.style.background = "lightblue"
        box.style.padding = "10px"
        // 如果传入是一个class类选择器, 一定要添加.前缀
        var box2 = document.querySelector('.box')
        box2.style.background = "lightgreen"
        box2.style.padding = "10px"
        // 也可以传入标签选择器
        var h1 = document.querySelector('h1')
        h1.style.background = "pink"
        h1.style.padding = "10px"
        // 可以传入后代选择器或者子代选择器, 只返回匹配到的第一个元素的dom对象
        var li = document.querySelector('.list li')
        console.log(li);
         li.style.background = "orange"
        li.style.padding = "10px"
        // 传入属性选择器
        var inp=document.querySelector('[type="text"]')
        inp.style.border="2px solid blue"

    </script>
</body>

</html>